<template>
  <Layout>
    <QueryForm ref="searchRef"  @search="flushedTable"/>
    <LayoutContent >
      <n-card style="height: 100%; box-sizing: border-box">
        <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
          <n-space>
            <n-button size="small" type="primary" @click="openAdd">
              <template #icon>
                <s-icon :component="AddCircleOutline"/>
              </template>
              新增
            </n-button>
          </n-space>
        </div>
        <n-data-table
            :columns="columns"
            :data="dataRows"
            :row-key="(row)=>row.id"
            :indent="10"
            :loading="loading"
            :single-line="false"
        />
      </n-card>
    </LayoutContent>
    <AddForm
        v-model:show="showAdd" :ref="addRef"
        positiveText="提交"
        negativeText="取消"
        @flushedTable="flushedTable"
        @close="()=>showAdd=false"
    />
    <UpdateForm
        v-model:show="showUpdate" :ref="updateRef"
        positiveText="提交"
        negativeText="取消"
        @flushedTable="flushedTable"
        @close="()=>showUpdate=false"
        :rowData="rowData"
    />
  </Layout>
</template>
<script name="SM-MENU"  setup>
// 菜单管理模块
import {h, onMounted, ref} from "vue";
import {getMenuTree} from "@/api/system/menuApi";
import {NBadge, NButton,  NSpace} from "naive-ui";
import QueryForm from "@/views/admin/sys/menu/QueryForm.vue";
import {AddCircleOutline} from "@vicons/ionicons5";
import AddForm from "@/views/admin/sys/menu/AddForm.vue";
import UpdateForm from "@/views/admin/sys/menu/UpdateForm.vue";
import Layout from "@/components/ExtLayout/SLayout.vue"
import LayoutContent from "@/components/ExtLayout/SLayoutContent.vue"
import SIcon from "@/components/public/SIcon.vue";
import SearchForm from "@/views/admin/sys/dict/SearchForm.vue";
// 数据
const dataRows = ref([])
const loading = ref(false)
const searchRef = ref();
const addRef = ref();
const updateRef = ref();
const showAdd = ref(false);
const showUpdate = ref(false);

const rowData = ref({})
// 表格表头
const columns = [
  {
    title: '菜单名称',
    key: 'menuName',
    width:200,
    ellipsis:true
  },
  {
    title: '菜单代码',
    key: 'menuCode',
    render(rowData){
      return h('div',[
        h(NBadge,{
          dot: true,
          type:"success",
          offset:[1,-1],
        }),
          rowData.menuCode
      ])
    }
  },
  {
    title: '菜单图标',
    key: 'icon',
    render: (rowData)=>{
      const {icon} = rowData
      return h(SIcon,{icon:icon})
    }
  },
  {
    title: '组件路径',
    key: 'url'
  },
  {
    title: '操作',
    key: 'option',
    render:(row)=>{
      return h(NSpace,null,()=> [
          h(NButton,{
              size:"tiny",
              type: 'primary',
                round:true,
              onClick:()=> {rowData.value = row;showUpdate.value=true}
            },
            {default:() => '修改'}
          ),
          h(NButton,{
            size:"tiny",
            type: 'error',
            round:true,
            // onClick:()=> {}
            },{default:() => "删除"}
          ),
      ])
    }
  },
]
// 查询数据
const getData = ()=>{
  // 加载数据
  loading.value = true
  const params = {
    ...searchRef.value.searchParam
  }
  getMenuTree(params).then(res=>{
     const data = res.data;
     dataRows.value = data || [];
    loading.value = false
  })
}
const flushedTable = ()=>{
  getData();
}
const openAdd = ()=>{
  // 打开新增菜单页面
  showAdd.value = true
}
// 初始化加载
onMounted(()=> {
  // 查询数据
  getData();
})
</script>
